<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
	<title>填写地址</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Wx/css/base.css" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Wx/css/detail.css" />
    <link href="__PUBLIC__/Wx/css/layout.min.css" rel="stylesheet" />
    <link href="__PUBLIC__/Wx/css/scs.min.css" rel="stylesheet" />

</head>
<style>
	.areabox{
		width: 70%;
		float: right;
	}
	.areabox select{
		width: 30%;
		height: 50px;
		font-size: 15px;
	}
</style>
<body>
<div class="detail">
	<form  id="authen" action="__MODULE__/Authentication/edit" method="post">
		<div class="write">
			<ul>
				<li><span>用户</span><input type="text" name="realname" value="{$realname}" placeholder="请输入真实姓名" required/></li>
				<li>
					<span>手机号</span><input type="text" name="mobile" placeholder="请输入电话" value="{$mobile}" style="width:40%;" pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$" required/><input type="button" value="发送验证码" style="display:inline-block; width:30%; margin-left:2%;height:40px; background:#ff4400; font-size:15px; color:#fff; border-radius:2px;" onclick="getsms(this)"/>
				</li>
				<li><span>验证码</span><input type="text" class="code"  placeholder="请输入验证码" required/></li>
				<li><span>所在地区</span>
                <input type="text" class="areaShow" laceholder="Click me to pick an address" id="myAddrs" name="addr" data-key="4-84-1298" value="山西省 太原市 万柏林区" style="background:url(__PUBLIC__/Wx/img/right.png) no-repeat right center; background-size:20px 20px;width: 70%;"/>
                <!--<input type="text" class="areaShow" placeholder="请选择地址" style="background:url(__PUBLIC__/Wx/img/right.png) no-repeat right center; background-size:20px 20px;width: 70%;" required/>
					<div class="areabox" style="display:none">
						<select class="form-control select-1" name="a_id_1" required>
							<option value="">请选择省</option>
							<volist name="area" id="vo">
								<option value="{$vo.id}" <?=$vo['id']==$c_info['a_id_1']?'selected':''?> > <?=$vo['name']?></option>
							</volist>
						</select>
						</select>
						<select class="form-control select-2" name="a_id_2" required>
							<empty name="c_info">
								<option value="">请选择市</option>
								<else />
								<option value="<?=$c_info['a_id_2']?>" selected><?=$c_info['a_2_name']?></option>
							</empty>
						</select>
						<select class="form-control select-3" name="a_id_3" required>
							<empty name="c_info">
								<option value="">请选择区</option>
								<else />
								<option value="<?=$c_info['a_id_3']?>" selected><?=$c_info['a_3_name']?></option>
							</empty>
						</select>
					</div>-->
				</li>
				<li style="margin-bottom:10px;"><span>所在小区</span><input type="text" name="c_id" value="{$c_info.title}" placeholder="请输入小区,例如：中心花园" required/></li>
				<li><span>我的家乡</span><input type="text" name="hometown" value="{$hometown}" placeholder="请输入家乡" required/></li>
			</ul>
		</div>
		<div class="button"><input type="button" value="提交" onClick="subcode()"/></div>
	</form>
</div>
<script type="text/javascript" src="__PUBLIC__/Wx/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
    var code;
    //发送验证码
    function getsms($this){
        var mobile = $($this).prev().val();//获取手机号
        $.post('<?=U("Authentication/sendsms")?>',{'mobile':mobile},function (d) {
            d=JSON.parse(d);//编译json数据
            if(d.state == 0){
                //验证码计时
                var i=60;
                var timer=setInterval(function(){
                    i--;
                    $($this).val("请"+i+"秒后重新请求");
                    $($this).attr("disabled","disabled");
                    if(i==0){
                        clearInterval(timer);
                        $($this).val("发送验证码");
                        $($this).removeAttr("disabled");
                    }
                },1000);
                //获取验证码
                if(d.code){
                    code = d.code;
                }
            }else{
                alert(d.value)
            }//end if
        })//end $.post
    }//end fun getsmsm()

    //地址选择器出现
    $(".areaShow").click(function () {
        $(this).remove();
        $(".areabox").show();
    });

    // 获取二级地址
    $(".select-1").change(function() {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "__MODULE__/MyAddress/getnext/rid/" + $(".select-1").val(),
            async: false,
            success: function (data) {
                //展示下一级地区
                var instr = "";
                for (var i = 0; i < data.length; i++) {
                    instr += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                }//end for
                $(".select-2 option").remove();//移除所有option
                $(".select-3 option").remove();//移除所有option
                $(".select-2").append(instr);//添加新的option
            }
        });//end ajax
    })

    //二级
    $(".select-2").change(function(){
        //获取下一级所有地址
        $.ajax({
            type : "POST",
            dataType : "json",
            url: "__MODULE__/MyAddress/getnext/rid/"+$(".select-2").val(),
            async:false,
            success: function(data){
                //展示下一级地区
                var instr = "";
                for(var i=0;i<data.length;i++){
                    instr += "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                }//end for
                $(".select-3 option").remove();//移除所有option
                $(".select-3").append(instr);//添加新的option
            }
        });//end ajax

    });//end change

	function subcode() {
	    var from = $("#authen").serializeArray();
	    console.log(from);
	    for(var i = 0; i  < from.length ; i++){
	        if(from[i].value == ""){
				alert("请填写完整信息");
				return;
			}
		}//end for
		//验证码判断
		var input_code = $(".code").val();
		if(input_code != code || input_code == ''){
		    alert("验证码错误");
		    return;
		}
        $("#authen").submit();
    }
</script>
    <script src="__PUBLIC__/Wx/js/jquery.min.js"></script>
    <script src="__PUBLIC__/Wx/js/jquery.scs.min.js"></script>
    <!--<script src="__PUBLIC__/Wx/js/CNAddrArr.min.js"></script>-->

    <script>
	var addr_arr=new Array;
	{$ali}
    $(function() {
        /**
         * 通过数组id获取地址列表数组
         *
         * @param {Number} id
         * @return {Array} 
         */ 
        function getAddrsArrayById(id) {
            var results = [];
            if (addr_arr[id] != undefined)
                addr_arr[id].forEach(function(subArr) {
                    results.push({
                        key: subArr[0],
                        val: subArr[1]
                    });
                });
            else {
                return;
            }
            return results;
        }
        /**
         * 通过开始的key获取开始时应该选中开始数组中哪个元素
         *
         * @param {Array} StartArr
         * @param {Number|String} key
         * @return {Number} 
         */         
        function getStartIndexByKeyFromStartArr(startArr, key) {
            var result = 0;
            if (startArr != undefined)
                startArr.forEach(function(obj, index) {
                    if (obj.key == key) {
                        result = index;
                        return false;
                    }
                });
            return result;
        }

        //bind the click event for 'input' element
        $("#myAddrs").click(function() {
            var PROVINCES = [],
                startCities = [],
                startDists = [];
            //Province data，shall never change.
            addr_arr[0].forEach(function(prov) {
                PROVINCES.push({
                    key: prov[0],
                    val: prov[1]
                });
            });
            //init other data.
            var $input = $(this),
                dataKey = $input.attr("data-key"),
                provKey = 1, //default province 北京
                cityKey = 36, //default city 北京
                distKey = 37, //default district 北京东城区
                distStartIndex = 0, //default 0
                cityStartIndex = 0, //default 0
                provStartIndex = 0; //default 0

            if (dataKey != "" && dataKey != undefined) {
                var sArr = dataKey.split("-");
                if (sArr.length == 3) {
                    provKey = sArr[0];
                    cityKey = sArr[1];
                    distKey = sArr[2];

                } else if (sArr.length == 2) { //such as 台湾，香港 and the like.
                    provKey = sArr[0];
                    cityKey = sArr[1];
                }
                startCities = getAddrsArrayById(provKey);
                startDists = getAddrsArrayById(cityKey);
                provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
                cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
                distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
            }
            var navArr = [{//3 scrollers, and the title and id will be as follows:
                title: "省",
                id: "scs_items_prov"
            }, {
                title: "市",
                id: "scs_items_city"
            }, {
                title: "区",
                id: "scs_items_dist"
            }];
            SCS.init({
                navArr: navArr,
                onOk: function(selectedKey, selectedValue) {
                    $input.val(selectedValue).attr("data-key", selectedKey);
                }
            });
            var distScroller = new SCS.scrollCascadeSelect({
                el: "#" + navArr[2].id,
                dataArr: startDists,
                startIndex: distStartIndex
            });
            var cityScroller = new SCS.scrollCascadeSelect({
                el: "#" + navArr[1].id,
                dataArr: startCities,
                startIndex: cityStartIndex,
                onChange: function(selectedItem, selectedIndex) {
                    distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
                }
            });
            var provScroller = new SCS.scrollCascadeSelect({
                el: "#" + navArr[0].id,
                dataArr: PROVINCES,
                startIndex: provStartIndex,
                onChange: function(selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
                    cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
                    distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
                }
            });
        });
    });
    </script>

</body>
</html>